<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-select v-model="pageParam.state" clearable placeholder="请选择状态 ">
					<el-option label="待发布" :value="0"></el-option>
					<el-option label="发布" :value="1"></el-option>
					<el-option label="下架" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList('reset')">查询</el-button>
				<el-button type="primary" @click="openDetails('save')">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="pageList" border v-loading="pageListLoading" style="width: 100%" stripe border
			:header-cell-style="{background:'#eef1f6',color:'#606266',height:'70px'}">
			<el-table-column header-align="center" align="center" width="80" label="序号">
				<template slot-scope="scope"><span>{{scope.$index+(pageParam.page - 1) * pageParam.limit + 1}}
					</span></template>
			</el-table-column>
			<el-table-column prop="title" show-overflow-tooltip header-align="center" align="center" label="标题">
			</el-table-column>
			<el-table-column prop="detail" show-overflow-tooltip header-align="center" align="center" label="详情">
			</el-table-column>
			<el-table-column prop="state" header-align="center" align="center" width="100" label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.state==0">待发布</el-tag>
					<el-tag v-if="scope.row.state==1" type="success">发布</el-tag>
					<el-tag v-if="scope.row.state==2" type="warning">下架</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="noticeTime" header-align="center" align="center" label="发布时间">
			</el-table-column>
			<el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
			</el-table-column>
			<el-table-column header-align="center" align="center" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="openDetails('show',scope.row)" class="c-info">查看
					</el-button>
					<el-button v-if="scope.row.state==0||scope.row.state==2" type="text" size="small"
						@click="switchCheck(scope.row)">发布</el-button>
					<el-button v-if="scope.row.state==1" type="text" size="small" @click="switchCheck(scope.row)"
						class="c-info">下架</el-button>
					<el-button type="text" size="small" @click="openDetails('update',scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="delData(scope.row)" class="c-error">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
    <el-pagination background @size-change="sizeChange" @current-change="pageChange" :current-page="pageParam.page"
    	:page-sizes="[10, 20, 30, 50]" :page-size="pageParam.limit" layout="total, sizes, prev, pager, next, jumper"
    	:total="totalCount">
    </el-pagination>
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
			<el-form ref="form" :disabled="dialogTitle=='查看'" :rules="rules" :model="fromData" label-width="140px">
				<el-form-item label="标题" prop="title">
					<el-input maxlength="50" v-model="fromData.title" placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-form-item label="详情" prop="detail">
					<el-input type="textarea" maxlength="100" v-model="fromData.detail" placeholder="请输入详情"></el-input>
				</el-form-item>
				<el-form-item label="发布时间" v-if="dialogTitle=='查看'">
					<el-input  v-model="fromData.noticeTime" ></el-input>
				</el-form-item>
				<el-form-item label="创建时间" v-if="dialogTitle=='查看'">
					<el-input  v-model="fromData.createTime" ></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button v-if="dialogTitle=='新增'" type="primary" :loading="btnLoading" @click="saveDateils">确 定</el-button>
				<el-button v-if="dialogTitle=='修改'" type="primary" :loading="btnLoading" @click="updateDateils">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import merchantApi from '@/api/merchantService.js'
	export default{
	  data () {
	    return {
	      pageParam: {
	        page: 1,
	        limit: 10
	},
	      fromData: {},
	      totalCount: 0,
	      dialogVisible: false,
	      pageListLoading: false,
	      btnLoading: false,
	      pageList: [],
	      dialogTitle: '',
	      rules: {
	        title: [{
	          required: true,
	          message: '请输入标题',
	          trigger: 'change'
	}],
	        detail: [{
	          required: true,
	          message: '请输入详情',
	          trigger: 'change'
	}]
	}
	}
	},
	  created () {
	    this.getDataList()
	},
	  methods: {
			// 关闭弹窗
	    handleClose () {
	      this.$refs.form.resetFields()
	      this.dialogVisible = false
	    },
			// 打开弹窗
	    openDetails (val, row) {
	      this.dialogVisible = true
	      if (val == 'show') {
	        this.dialogTitle = '查看'
	        this.getDeatils(row)
	} else if (val == 'update') {
	  this.dialogTitle = '修改'
	  this.getDeatils(row)
	} else if (val == 'save') {
	  this.dialogTitle = '新增'
	}
	},
			// 获取详情
	    getDeatils (row) {
	      merchantApi.noticeInfo(row.id).then(res => {
	        if (res.data && res.data.code == 200) {
	          this.fromData = res.data.data
	          this.fromData.file_path = res.data.data.filePath
	}
	})
	},
			// 发布或上架
	    switchCheck (row) {
	      let param = {
	        id: row.id
	}
	      if (row.state == 0 || row.state == 2) {
	        param.state = 1
	} else {
	        param.state = 2
	}
	      merchantApi.noticeCheck(param).then(res => {
	        if (res.data && res.data.code == 200) {
	          this.$message.success('操作成功')
	          this.getDataList()
	}
	})
	},
			// 删除
	    delData (row) {
	      this.$confirm('确定删除?', '提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	}).then(() => {
	  this.pageListLoading = true
	  merchantApi.noticeDel(row.id).then(res => {
	    this.pageListLoading = false
	    if (res.data && res.data.code == 200) {
	      this.$message.success('删除成功')
	      this.getDataList()
	}
	})
	}).catch(() => {})
	    },
    sizeChange (val) {
      	this.pageParam.limit = val
      	this.pageParam.page = 1
      	this.getDataList()
    },
      // 当前页
    pageChange (val) {
      	this.pageParam.page = val
      	this.getDataList()
    },
			// 新增
	    saveDateils () {
	      this.$refs.form.validate((valid) => {
	        this.btnLoading = true
	        merchantApi.noticeSave(this.fromData).then(res => {
	          if (res.data && res.data.code == 200) {
	            this.$message.success('提交成功')
            this.handleClose()
	            this.getDataList()
	}
	          this.btnLoading = false
	})
	})
	},
			// 编辑
	    updateDateils () {
	      this.$refs.form.validate((valid) => {
	        this.btnLoading = true
	        merchantApi.noticeUpdate(this.fromData).then(res => {
	          if (res.data && res.data.code == 200) {
	            this.$message.success('提交成功')
            this.handleClose()
	            this.getDataList()
	}
	          this.btnLoading = false
	})
	})
	},
			// 获取列表
	    getDataList (reset) {
	      let that = this
	      if (reset) {
	        this.pageParam.page = 1
	}
	      for (let v in this.pageParam) {
	        if (this.pageParam[v] === '') {
	          this.pageParam[v] = null
	}
	}
	      this.pageListLoading = true
	      merchantApi.noticePage(this.pageParam).then(res => {
	        if (res.data && res.data.code === 200) {
	          this.pageList = res.data.page.list
	          this.totalCount = res.data.page.totalCount
	}
	        that.pageListLoading = false
	})
	}
	}
	}
</script>

<style>
</style>
